<template>
  <up-popup class="geodeticPopup" :safeAreaInsetTop="true" mode="top" :overlay="false" :show="show" @close="close" @open="openCallback">
    <up-navbar bgColor="#7099B4" :safeAreaInsetTop="true">
      <template #left>
        <up-icon size="35" :name="geodetic"></up-icon>
        <up-text text="大地測量站" color="#fff"></up-text>
      </template>

      <template #right>
        <up-icon size="28" :name="closePng" color="#fff" @click="close"></up-icon>
      </template>
    </up-navbar>
    <view class="content">
      <bangs />
      <up-gap height="10" bgColor="#ffffff00"></up-gap>
      <up-input
        placeholder="221072"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
        :focus="true"
        :border="'surround'"
        v-model="value"
      ></up-input>


      <up-gap height="50" bgColor="#ffffff00"></up-gap>
        <up-row class="hk1980but">
            <up-col span="6">
                <up-button text="取消" color="rgb(112, 153, 180)" @click="close"></up-button>
            </up-col>
            <up-col span="6">
                <up-button @click="searchChange">
                  <up-icon :name="searchPng" size="25" color="rgb(112, 153, 180)"></up-icon>
                </up-button>
            </up-col>
        </up-row>

      <up-gap height="10" bgColor="#ffffff00"></up-gap>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
// import debounce from 'lodash.debounce';
import closePng from '@/static/images/close.png'
import searchPng from '@/static/images/search1.png'
import bangs from '@/pages/common/head/bangs.vue'
import geodetic from '@/static/icon/geodetic.png'

import { mapStore } from '@/stores'

const mapStoreFun = mapStore();

// 创建响应式数据
const show = ref(false)

const emit = defineEmits<{
  (e: 'click', data: any): void
}>()

const value = ref('')

const searchChange = () => {
  const val = value.value.trim();
  if (!val) {
    // 为空时显示提示（使用 uni-app 的 showToast）
    uni.showToast({
      title: '大地測量站不能為空',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  emit('click', {STN_NO:value.value})
}
// 定义方法
function open() {
  mapStoreFun.SUM_MAPTYPE(1)
  show.value = true
}

function openCallback() {
}

function close() {
  mapStoreFun.SUM_MAPTYPE(-1)
  show.value = false
  value.value = ''
}


defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
.geodeticPopup .content {
  padding: 20rpx 20rpx 0px 20rpx;
  background-color: #fff;
  border-radius: 0px;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.searchList {
  height: 35vh;
  overflow-y: auto;
}
.item {
  padding: 20rpx 20rpx;
  border-bottom: 1px solid #d9d4d4;
  .top {
    display: flex;
    font-weight: bold;
    font-size: 34rpx;
    .phone {
      margin-left: 60rpx;
    }
    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 20rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(49, 145, 253);
      }
      .red {
        background-color: red;
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
    justify-content: space-between;
    color: #999999;
  }
}
</style>
